<template>
<div style="position: relative; width:100%;height:100%;" ref="Carddiv" >
    <div :style="{width:Cardwidth+'px',float:'left',marginRight:'9px',marginBottom:'9px'}" v-for="(item,index) in datalist" :key="index">
        <Card style="width:100%;cursor: pointer;">
            <p slot="title">
                <Icon type="ios-clock-outline"  size="20"/>
                {{`${item.time}(${item.week})`}}
            </p>
            <div v-for="(it,ind) in item.entracededey" :key="ind">
                <div> 开始时间：{{it.time_an}}</div>
                <div> 结束时间： {{it.time_en}}</div>
                <div v-if="it.type==4"> 
                    状态：
                    <span v-if="now < (item.time+' '+it.time_en)">异常</span>
                    <span v-else style="color:red">旷工</span>
                </div>
                <div v-else> 状态：
                    <span v-if="it.type==1" style="color:green">正常</span>
                    <span v-else-if="it.type==2" style="color:red">迟到</span>
                    <span v-else-if="it.type==6" style="color:#007d7f">请假</span>
                    <span v-else-if="it.type==99" style="color:#f58e4d">借调</span>
                    <span v-else>时间未到</span>
                </div>
                <span v-if="ind==0">
                    <br/>
                    <hr/>
                    <br/>
                </span>
                
            </div>
        </Card>
    </div>
    <div style="clear:both"></div>
    <Spin size="large" fix v-if="tableload"></Spin>
</div>
</template>

<script>   
  export default {
        props: {
            conditiones: {
                type: [Boolean,Object],
                default: false
            },
        },
    data () {
      return {

            tableload:false,
            Cardwidth:0,

            datalist:[],//荣誉变量

            height: null,
             
            listUrl:`api/teacher/v1/get/teacher/user/listss_details/${this.conditiones.user_id}`,//

        }
    },
    methods: {
        


        /************************************************************
         * 
         * 获取教师数据
         * 
         ************************************************************/
        queryData(){
            this.tableload=true
            this.$http.get(`${this.listUrl}?month=${this.conditiones.month}`)
            .then(val=>{
                this.datalist=val.data
                this.tableload=false//加载完数据动画结束  
                let a = this.$refs.Carddiv.offsetWidth
                this.Cardwidth = a/5-10
            }) 
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload = false;
            })

        },
        
    },
    mounted(){
        this.queryData()   
    },
    computed: {
        now: function () {
            let ss = this.$util.dateTime()
            return ss
        }
    }
  }
</script>